<template>
  <div id="app">
    <div class="header">
      <Header></Header>
    </div>
    <div class="main">
      <div class="dote-pad">
        <div class="dote-pad-title">科技租车大事记</div>
        <div class="dote-pad-subtitle">科技租车愿与您共同成长</div>
        <div class="dote-pad-content">
          <div class="dote-pad-content-img">
            <img src="../assets/active.png" alt=""></div>
          <div class="dote-pad-content-tabs">
            <div class="ant-tabs ant-tabs-top dote-pad-size">
              <div role="tablist" class="ant-tabs-nav" style="margin: 0px;">
                <div class="ant-tabs-nav-wrap">
                  <div class="ant-tabs-nav-list" style="transform: translate(0px, 0px);">
                    <div class="ant-tabs-tab ant-tabs-tab-active">
                      <div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-0-tab-1" aria-controls="rc-tabs-0-panel-1">公司动态
                      </div>
                    </div>
                    <div class="ant-tabs-tab" style="margin-left: 75px;">
                      <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-0-tab-2" aria-controls="rc-tabs-0-panel-2">媒体报道
                      </div>
                    </div>
                    <div class="ant-tabs-tab" style="margin-left: 75px;">
                      <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-0-tab-3" aria-controls="rc-tabs-0-panel-3">优惠活动
                      </div>
                    </div>
                    <div class="ant-tabs-tab" style="margin-left: 75px;">
                      <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-0-tab-4" aria-controls="rc-tabs-0-panel-4">租车攻略
                      </div>
                    </div>
                    <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="left: 0px; width: 56px;"></div>
                  </div>
                </div>
                <div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden" style="margin: 0px;">
                  <button type="button" class="ant-tabs-nav-more" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="rc-tabs-0-more-popup" id="rc-tabs-0-more" aria-expanded="false" style="margin-left: 75px; visibility: hidden; order: 1;">
                    <span  role="img" aria-label="ellipsis" class="anticon anticon-ellipsis">
                    <svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                      <path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path>
                    </svg>
                  </span>
                  </button>
                </div>
                <div class="ant-tabs-extra-content"><a class="dote-pad-news" href="//news.zuche.com" target="_blank">更多新闻
                  &gt;&gt;</a></div>
              </div>
              <div class="ant-tabs-content-holder">
                <div class="ant-tabs-content ant-tabs-content-top">
                  <div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"
                       id="rc-tabs-0-panel-1" aria-labelledby="rc-tabs-0-tab-1">
                    <ul class="dote-pad-content-ul">
                      <li><a href="" target="_blank">科技租车持续扩张，新进45城</a>
                        <div>2021-11-17 17:50</div>
                      </li>
                      <li><a href=""
                             target="_blank">海南承包你的冬季假日，一起和科技租车去看碧海蓝天</a>
                        <div>2021-11-05 17:53</div>
                      </li>
                      <li><a href="" target="_blank">科技租车双11接连“放大招”
                        覆盖多重用车场景</a>
                        <div>2021-11-03 17:52</div>
                      </li>
                      <li><a href="" target="_blank">科技租车回购近一亿美元债券</a>
                        <div>2021-10-29 18:11</div>
                      </li>
                      <li><a href="" target="_blank">打造双11爆款 科技租车首发“随心租”产品</a>
                        <div>2021-10-21 17:50</div>
                      </li>
                    </ul>
                  </div>
                  <div role="tabpanel" tabindex="-1" aria-hidden="true" class="ant-tabs-tabpane" id="rc-tabs-0-panel-2"
                       aria-labelledby="rc-tabs-0-tab-2" style="display: none;"></div>
                  <div role="tabpanel" tabindex="-1" aria-hidden="true" class="ant-tabs-tabpane" id="rc-tabs-0-panel-3"
                       aria-labelledby="rc-tabs-0-tab-3" style="display: none;"></div>
                  <div role="tabpanel" tabindex="-1" aria-hidden="true" class="ant-tabs-tabpane" id="rc-tabs-0-panel-4"
                       aria-labelledby="rc-tabs-0-tab-4" style="display: none;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="activity" style="width: 100%;height: 1200px;background-color: #f2f3f5">
        <div class="long_active" style="margin-bottom: 50px">
          <div class="row1">
            <Row>
              <Col style="height: 200px;width: 1100px;margin:auto;margin-top:50px;" >
                <Card padding="0">
                  <img src="../assets/active/active.jpg" alt="">
                  <div class="act_ti" style="float: right">
                    <div class="so" style="margin-right: 150px;margin-bottom: 40px;margin-top: 50px">
                      <span style="font-family:'Microsoft YaHei';font-size: 30px">科技租车新城开业</span>
                    </div>
                    <div style="margin-left: 10px">
                      <Button style="width: 168px" size="large" type="info">查看活动</Button>

                    </div>
                    <div style="margin-top: 25px;margin-left: 10px">
                      <Tag color="blue">全国</Tag>
                      <Tag color="blue">全国</Tag>
                      <Tag color="blue">全国</Tag>
                      <Tag color="blue">全国</Tag>
                    </div>


                  </div>
                </Card>
              </Col>
            </Row>
          </div>
          <div class="row1" style="margin-top: 100px">
            <Row>
              <Col style="height: 200px;width: 1100px;margin:auto;margin-top:50px;" >
                <Card padding="0">
                  <img src="../assets/active/active_1.jpg" alt="">
                  <div class="act_ti" style="float: right">
                    <div class="so" style="margin-right: 150px;margin-bottom: 40px;margin-top: 50px">
                      <span style="font-family:'Microsoft YaHei';font-size: 30px">秋冬租车得免租</span>
                    </div>
                    <div style="margin-left: 10px">
                      <Button style="width: 168px" size="large" type="info">查看活动</Button>

                    </div>
                    <div style="margin-top: 25px;margin-left: 10px">
                      <Tag color="blue">全国</Tag>
                      <Tag color="blue">全国</Tag>
                      <Tag color="blue">全国</Tag>
                      <Tag color="blue">全国</Tag>
                    </div>


                  </div>
                </Card>
              </Col>
            </Row>
          </div>
          <div class="row1" style="margin-top: 100px">
            <Row>
              <Col style="height: 200px;width: 1100px;margin:auto;margin-top:50px;" >
                <Card padding="0">
                  <img src="../assets/active/active_2.jpg" alt="">
                  <div class="act_ti" style="float: right">
                    <div class="so" style="margin-right: 150px;margin-bottom: 40px;margin-top: 50px">
                      <span style="font-family:'Microsoft YaHei';font-size: 30px">自驾去海南</span>
                    </div>
                    <div style="margin-left: 10px">
                      <Button style="width: 168px" size="large" type="info">查看活动</Button>

                    </div>
                    <div style="margin-top: 25px;margin-left: 10px">
                      <Tag color="blue">全国</Tag>
                      <Tag color="blue">全国</Tag>
                      <Tag color="blue">全国</Tag>
                      <Tag color="blue">全国</Tag>
                    </div>


                  </div>
                </Card>
              </Col>
            </Row>
          </div>
        </div>
        <div class="short_active">
          <div></div>
        </div>
      </div>
    </div>
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
  import Header from "../components/Header";
  import Footer from "../components/Footer";

  export default {
    name: "Activity",
    components: {
      Header,
      Footer
    }
  }
</script>

<style scoped>
  .dote-pad {
    padding: 60px 0;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .dote-pad-title {
    height: 40px;
    font-size: 32px;
    font-weight: 400;
    color: #171721;
    line-height: 40px;
    letter-spacing: 2px;
  }
  .dote-pad-subtitle {
    height: 24px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #686876;
    line-height: 24px;
    letter-spacing: 2px;
  }
  .dote-pad-content {
    display: flex;
    margin-top: 36px;
  }
  .dote-pad-content-img {
    width: 460px;
    height: 270px;
  }
  .dote-pad-content-img img {
    width: 100%;
    height: 100%;
  }

  img {
    vertical-align: middle;
    border-style: none;
  }
  fieldset, img {
    border: 0;
  }
  .dote-pad-content-tabs {
    width: 705px;
    margin-left: 34px;
  }
  .ant-tabs {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0,0,0,.85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    display: flex;
    overflow: hidden;
  }
  .ant-tabs-bottom, .ant-tabs-top {
    flex-direction: column;
  }
  .ant-tabs>.ant-tabs-nav, .ant-tabs>div>.ant-tabs-nav {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
  }
  .ant-tabs>.ant-tabs-nav .ant-tabs-nav-wrap, .ant-tabs>div>.ant-tabs-nav .ant-tabs-nav-wrap {
    position: relative;
    display: inline-block;
    display: flex;
    flex: auto;
    align-self: stretch;
    overflow: hidden;
    white-space: nowrap;
    transform: translate(0);
  }
  .ant-tabs>.ant-tabs-nav .ant-tabs-nav-list, .ant-tabs>div>.ant-tabs-nav .ant-tabs-nav-list {
    position: relative;
    display: flex;
    transition: transform .3s;
  }
  .ant-tabs-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 12px 0;
    font-size: 14px;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
  }
  .dote-pad-size .ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #171721;
    font-weight: 700;
  }
  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #ffc75d;
    text-shadow: 0 0 .25px currentColor;
  }
  .ant-tabs-tab-btn, .ant-tabs-tab-remove {
    outline: none;
    transition: all .3s;
  }
  .ant-tabs-tab+.ant-tabs-tab {
    margin: 0 0 0 32px;
  }
  .ant-tabs-tab-btn, .ant-tabs-tab-remove {
    outline: none;
    transition: all .3s;
  }
  .ant-tabs-content-holder {
    flex: auto;
    min-width: 0;
    min-height: 0;
  }
  .ant-tabs-content {
    display: flex;
    width: 100%;
  }
  .ant-tabs-tabpane {
    flex: none;
    width: 100%;
    outline: none;
  }
  .dote-pad-content-ul {
    padding: 12px 0;
    margin: 0;
  }
  dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1em;
  }
  ol, ul {
    list-style: none;
  }
  .dote-pad-content-ul>li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #171721;
    line-height: 20px;
    padding-left: 16px;
    position: relative;
    cursor: pointer;
  }
  .dote-pad-content-ul>li>a {
    color: #171721;
    padding: 10px 0;
    text-decoration: none;
  }
  .dote-pad-content-ul>li>div {
    font-size: 12px;
    color: #999;
  }

  .ant-tabs-ink-bar {
    position: absolute;
    background: #ffc75d;
    pointer-events: none;
  }
  /*小店*/
  .dote-pad-content-ul>li:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    background-color: #ffc75d;
    border-radius: 8px;
    display: block;
  }

  .dote-pad-size .ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #171721;
    font-weight: 700;
  }
</style>
